<template>
  <div>
    <px-table :data="tableData" class="visual-table" size="small" height="calc(100vh - 312px)" border @selection-change="handleSelectionChange">
      <px-table-column type="selection" width="30" align="center" />
      <px-table-column label="序号" type="index" width="30" align="center" fixed="left" />
      <px-table-column min-width="180" show-overflow-tooltip label="平台编码" align="center" fixed="left" prop="platformCode" />
      <px-table-column min-width="150" show-overflow-tooltip label="设备名称" align="center" prop="eqpName" />
      <px-table-column min-width="120" show-overflow-tooltip label="厂商" align="center" prop="manufacturer" />
      <px-table-column min-width="80" show-overflow-tooltip label="IP地址	" align="center" prop="ipAddr" />
      <px-table-column min-width="150" show-overflow-tooltip label="设备状态" align="center" prop="eqpStatus" />
      <px-table-column min-width="120" show-overflow-tooltip label="设备序列号" prop="eqpIsin" />
      <px-table-column min-width="120" show-overflow-tooltip label="安装位置" prop="installPosition" />
      <px-table-column min-width="120" show-overflow-tooltip label="监视方向" prop="monitorDirection" />
      <px-table-column min-width="120" show-overflow-tooltip label="位置code" prop="positionCode" />
      <px-table-column min-width="120" show-overflow-tooltip label="路径" prop="path" />
      <px-table-column min-width="120" show-overflow-tooltip label="厂区" prop="facCode">
        <template #default="scope">
          <px-tag effect="plain">
            {{ facMap[scope.row.facCode] }}
          </px-tag>
        </template>
      </px-table-column>
      <px-table-column v-if="props.needOpt" fixed="right" label="操作" min-width="80" align="center">
        <template #default="scope">
          <px-tooltip content="删除" placement="top">
            <px-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-if="props.total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="visual-pagination"
      :total="props.total"
      @pagination="queryTable"
    />
  </div>
</template>
<script setup lang="ts">
import { watch, ref, onMounted } from "vue";
import { cloneDeep } from "@pureadmin/utils";
import { queryDictData } from "@/api/common";
defineOptions({
  name: "EQPTABLE"
});
const queryParams = defineModel<{ pageNum?: number; pageSize?: number; [key: string]: any }>("queryParams");
const eqpId = ref("");
const props = defineProps({
  data: {
    require: true,
    type: Array
  },
  eqpImgList: {
    type: Object,
    default: () => ({})
  },
  total: {
    type: Number,
    default: 0
  },
  needOpt: {
    type: Boolean,
    default: true
  }
});
const tableData = ref([]);
const dialogVisibleCorpper = ref(false);
const facList = ref([]);
const facMap = ref({});
// 搜索项目下拉框
const queryClassNameSelect = async () => {
  facList.value = await queryDictData({ typeCode: "factoryArea" });
  if (facList.value) {
    facList.value.forEach(item => {
      facMap.value[item.value] = item.name;
    });
  }
};
watch(
  () => props.data,
  val => {
    if (val) {
      tableData.value = cloneDeep(val);
    }
  }
);
onMounted(() => {
  queryClassNameSelect();
});
const emits = defineEmits([
  "queryTable",
  "handleDelete",
  "handleUploadPic",
  "selectionChange",
  "handleSwitch",
  "handleSwitchLiquid",
  "handleUploadCropperDelete"
]);
const queryTable = () => {
  emits("queryTable");
};
const handleDelete = row => {
  emits("handleDelete", row);
};
const handleUploadPic = row => {
  emits("handleUploadPic", row);
};
const handleSelectionChange = datas => {
  emits("selectionChange", datas);
};
const handleSwitch = row => {
  emits("handleSwitch", row);
};
const handleSwitchLiquid = row => {
  emits("handleSwitchLiquid", row);
};
const cropperComfirm = () => {
  eqpId.value = "";
  emits("queryTable");
};
const handleUploadCropper = row => {
  eqpId.value = row.eqpId;
  dialogVisibleCorpper.value = true;
};
const handleUploadCropperDelete = row => {
  emits("handleUploadCropperDelete", row);
};
</script>

<style lang="scss" scoped>
.visual-title {
  margin-bottom: 10px;
}

.visual-table {
  --px-table-border-color: #dfdfdf;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 13px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
}

.visual-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
